<template>
  <div>
    <div class="c-pb20">
      <div class="c-flex-row c-aligni-center c-w100 c-pt28">
        <div class="c-bg-sgray6C6C c-br10 c-fs24 c-bg-sgray c-hh80 c-flex-row c-flex-grow1 c-w0 c-aligni-center c-ph24 c-justify-center c-bd1-F56C6C">
          <div class="c-fc-xlred">请您填写资料，申请加入小班课</div>
        </div>
      </div>
      <div class="c-ph24 c-fc-xblack c-fs26 c-pt30 c-pb20 c-flex-row c-flexw-wrap c-justify-sb">
        <span><b class="c-fc-xlred">*</b>微信昵称</span>
        <span class="c-fc-xlred" v-if="nickError ||nameError||telError||remarError">请填写必填信息</span>
      </div>
      <div class="c-ph24 c-bg-white c-flex-row c-aligni-center c-w100">
        <div class="c-bd1 c-br10 c-fs24 c-bg-sgray c-hh80 c-flex-row c-flex-grow1 c-w0 c-aligni-center c-ph24 c-justify-center" :class="nickError?'c-bd1-F56C6C':''">
          <input ref="input" class="c-w100 c-fc-xblack" v-model.trim="nickname" placeholder="请填写你的微信昵称" type="text" disabled="disabled">
        </div>
      </div>
      <!-- <div class="c-ph24 c-fc-xblack c-fs26 c-pt30 c-pb20 c-flex-row c-flexw-wrap c-justify-sb">
        <span>姓名</span>
      </div>
      <div class="c-ph24 c-bg-white c-flex-row c-aligni-center c-w100">
        <div class="c-bd1 c-br10 c-fs24 c-bg-sgray c-hh80 c-flex-row c-flex-grow1 c-w0 c-aligni-center c-ph24 c-justify-center" :class="nickError?'c-bd1-F56C6C':''">
          <input ref="input" class="c-w100 c-fc-xblack" v-model.trim="nickname" maxlength="16" placeholder="请填写你的姓名" type="text">
        </div>
      </div> -->
      <template v-if="contentType == 2">
        <form-com :relId="fId" :formComList="content" :comeForm="2" :formInfo="formInfo" @submitForm="submitForm"></form-com>
      </template>
      <div class="c-ph24" v-else>
        <div v-if="content.length!=0">
          <div class="c-fc-xblack c-fs26 c-pt30 c-pb20 c-flex-row c-flexw-wrap c-justify-sb" v-if="content.length!=0&&content[0]&&content[0].value==1">
            <span><b class="c-fc-xlred" v-if="content[0].isNeed">*</b>姓名</span>
          </div>
          <div class="c-bg-white c-flex-row c-aligni-center c-w100" v-if="content.length!=0&&content[0]&&content[0].value==1">
            <div class="c-bd1 c-br10 c-fs24 c-bg-sgray c-hh80 c-flex-row c-flex-grow1 c-w0 c-aligni-center c-ph24 c-justify-center" :class="nameError?'c-bd1-F56C6C':''">
              <input ref="input" class="c-w100 c-fc-xblack" v-model.trim="nameValue" maxlength="16" placeholder="请填写你的姓名" type="text">
            </div>
          </div>
          <div class="c-fc-xblack c-fs26 c-pt40 c-pb20" v-if="content.length!=0&&content[1]&&content[1].value==1">
            <span><b class="c-fc-xlred" v-if="content[1].isNeed">*</b>手机号</span>
          </div>
          <div class="c-bg-white c-flex-row c-aligni-center c-w100" v-if="content.length!=0&&content[1]&&content[1].value==1">
            <div class="c-bd1 c-br10 c-fs24 c-bg-sgray c-hh80 c-flex-row c-flex-grow1 c-w0 c-aligni-center c-ph24 c-justify-center" :class="telError?'c-bd1-F56C6C':''">
              <input ref="input" class="c-w100 c-fc-xblack" v-model.trim="telValue" maxlength="11" placeholder="请填写手机号码" type="tel">
            </div>
          </div>
          <div class="c-fc-xblack c-fs26 c-pt40 c-pb20" v-if="content.length!=0&&content[2]&&content[2].value==1"><span><b class="c-fc-xlred"
            v-if="content[2].isNeed">*</b>{{content[2].name?content[2].name:'备注信息'}}</span></div>
        </div>
        <div class="c-bg-white c-flex-row c-aligni-center c-w100 c-hh200" v-if="content.length!=0&&content[2]&&content[2].value==1">
          <div class="c-bd1 c-br10 c-fs24 c-bg-sgray c-flex-row c-flex-grow1 c-w0 c-h c-ph24 c-justify-center c-pv24" :class="remarError?'c-bd1-F56C6C':''">
            <textarea ref="textarea" class="c-w100 c-fc-xblack" v-model.trim="remarksValue" maxlength="50" placeholder="请填写，限50个字" type="text">
            </textarea>
          </div>
        </div>
        <div class="c-fs28 c-fc-white c-w100 c-lh80 c-textAlign-c c-br40 theme-bg-gradient c-mt80" :class="clickflag?'':'c-opacity50'" @click="saveInfoContent">提交</div>
      </div>

    </div>
  </div>
</template>
<script>
import formCom from '@/components/homePage/form/formCom.vue'
import { utilJs } from "@/utils/common.js";
export default {
  name: "PerfectInfo",
  components: {
    formCom,
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      dataStatus: 'HAS_MORE_DATA',
      liveList: [],
      companyAuth: localStorage.getItem("companyAuth") ? JSON.parse(localStorage.getItem("companyAuth")) : null,
      nickname: '',
      nameValue: '',
      telValue: '',
      remarksValue: '',
      isClicking: true,
      nickError: false,
      nameError: false,
      telError: false,
      remarError: false,
      content: [],
      clickflag: false,
      contentType: 0,
      formInfo: {},
      fId: '', // 关联的表单id
    };
  },
  created() {
    utilJs.appShare(this);
  },
  watch: {
    nickname(val) {
      this.changeFlag()
    },
    nameValue(val) {
      this.changeFlag()
    },
    telValue(val) {
      this.changeFlag()
    },
    remarksValue(val) {
      this.changeFlag()
    }
  },
  mounted() { },
  methods: {
    changeFlag() {
      if (this.nickname == "") {
        return true
      }
      if (this.content.length != 0) {
        if (this.content[0] && this.content[0].value && this.content[0].isNeed == 1) {
          if (this.nameValue == "") {
            return false
          }
        }
        if (this.content[1] && this.content[1].value && this.content[1].isNeed == 1) {
          if (this.telValue == "") {
            return false
          }
        }
        if (this.content[2] && this.content[2].value && this.content[2].isNeed == 1) {
          if (this.remarksValue == "") {
            return false
          }
        }
      }
      this.clickflag = true
    },
    //分享
    wechatShare: function () {
      let title = "小班课"; //window.localStorage.getItem("shareTitle");
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/privateClass/classDetail?classId=${localStorage.getItem("classId")}&refereeId=${localStorage.getItem("userId")}`;
      utilJs.wechatConfig(shareUrl, title, "", "", function () { }, true);
    },
    //手机端分享
    appShare: function () {
      let title = "小班课"; //window.localStorage.getItem("shareTitle");
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/privateClass/classDetail?classId=${localStorage.getItem("classId")}&refereeId=${localStorage.getItem("userId")}`;
      utilJs.appShareTrue(title, "", shareUrl, "");
    },
    //获取申请详情
    getJoinInfo() {
      let $this = this
      utilJs.getMethod(
        global.apiurl + `livePrivateClass/${this.$route.query.classId}/studentApply`,
        res => {
          //已经是学员了 || 成功加入
          if (res.code == 507 || res.code == 510) {
            this.$showCjToast({
              text: res.msg,
              type: "warn",
            }).then(() => {
              $this.clickClassId($this.$route.query.classId)
            });
            return
          }
          if (res.code == 508 || res.code == 509) {
            // 直接跳转
            this.$routerGo(this, "replace", {
              path: "/homePage/privateClass/joinCheck",
              query: {
                classId: this.$route.query.classId,
                mpQrcode: res.mpQrcode,
                isSubscribe: res.isSubscribe
              }
            })
            return;
          }
          this.formInfo = res;
          this.contentType = res.contentType;
          $this.nickname = res.nickname
          this.nameValue = res.userRealName
          if (res.content && res.content.length > 0) {
            $this.content = res.content
            this.fId = res.fId;
            console.log($this.content[0])
          }
        }, () => {
          this.clickClassId($this.$route.query.classId);
        }
      )
    },
    saveInfoContent() {
      let that = this
      if (that.nickname == '') {
        that.nickError = true
        return false;
      }
      if (this.content != 0) {
        if (this.content[0] && this.content[0].value == 1) {
          if (this.content[0].isNeed == 1) {
            if (that.nameValue == '') {
              that.nameError = true
              console.log(that.nameError)
              return false;
            }
          }
        }
        if (this.content[1] && this.content[1].value == 1) {
          if (this.content[1].isNeed == 1) {
            if (that.telValue == '') {
              that.telError = true
              console.log(that.telError)
              return false;
            }
            if (!utilJs.isPhoneNumber(that.telValue)) {
              this.$showCjToast({
                text: "请输入有效手机号",
                type: "warn",
              });
              return false;
            }
          } else if (that.telValue && !utilJs.isPhoneNumber(that.telValue)) {
            this.$showCjToast({
              text: "请输入有效手机号",
              type: "warn",
            });
            return false;
          }
        }
        if (this.content[2] && this.content[2].value == 1) {
          if (this.content[2].isNeed == 1) {
            if (that.remarksValue == '') {
              that.remarError = true
              console.log(that.remarError)
              return false;
            }
          }
        }
      }
      if (!that.isClicking) {
        return;
      }
      that.isClicking = false;
      utilJs.postMethod(global.apiurl + `livePrivateClass/${that.$route.query.classId}/saveStudentApply`, {
        contentType: that.contentType,
        nickname: that.nickname,
        studentName: that.nameValue,
        studentMobile: that.telValue,
        remark: that.remarksValue,
      }, function (
        res
      ) {
        if (res.isNeedAudit) {
          that.$routerGo(that, "replace", {
            path: "/homePage/privateClass/joinCheck",
            query: {
              classId: that.$route.query.classId,
              mpQrcode: res.mpQrcode,
              isSubscribe: res.isSubscribe
            }
          })
        } else {
          that.$cjConfirm({
            message: '提交成功！',
            showCancelButton: false,
            onConfirm:() => {
              that.isClicking = true;
              that.clickClassId(that.$route.query.classId)
            }
          })
        }
      },
        failRes => {
          that.isClicking = true;
        }
      );
    },
    submitForm(submitData) {
      let that = this
      if (!this.isClicking) {
        return;
      }
      this.isClicking = false;
      let data = {
        contentType: this.contentType,
        content: submitData.content,
        duration: submitData.duration
      };
      utilJs.postMethod(`${global.apiurl}livePrivateClass/${this.$route.query.classId}/saveStudentApply`, data, res => {
        this.isClicking = true;
        if (res.isNeedAudit) {
          this.$routerGo(this, "replace", {
            path: "/homePage/privateClass/joinCheck",
            query: {
              classId: this.$route.query.classId,
              mpQrcode: res.mpQrcode,
              isSubscribe: res.isSubscribe
            }
          })
          return;
        }
        that.$cjConfirm({
          message: '提交成功！',
          showCancelButton: false,
          onConfirm:() => {
            that.isClicking = true;
            that.clickClassId(that.$route.query.classId)
          }
        })
      }, failRes => {
        this.isClicking = true;
      })
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickClassId(classId) {
      let toPath = `/homePage/privateClass/classDetail?classId=${classId}`;
      this.iosAppRouteChange(toPath);
    },
  },
  activated() {
    this.nickname = ''
    this.nameValue = ''
    this.telValue = ''
    this.remarksValue = ''
    this.formInfo = {}
    setDocumentTitle("申请加入");// eslint-disable-line
    this.getJoinInfo()
    this.wechatShare();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
input,
textarea {
  font-size: 0.6rem;
  border: 0;
  background: none;
  outline: none;
}

input:focus,
textarea:focus {
  outline: none;
}
.c-bd1-F56C6C {
  border: 1px solid #f56c6c;
}
.c-bg-sgray6C6C {
  background: rgba(245, 108, 108, 0.05);
}
</style>


